<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

</head>
<body  onload="loaded()">
	<header class="mui-bar mui-bar-nav">
		<a href="bindingWxInfo.html" class="mui-icon mui-icon-locked  mui-pull-left"></a>
	    <h1 class="mui-title">首页</h1>
	    <!--span默认隐藏，有告警信息时在a标签上加样式名：warning的时候才显示(-->
	    <a href="warningList.html" class="mui-icon iconfont icon-msg mui-pull-right warning">
	    	<span class="mui-badge mui-badge-danger">3</span>
	    </a>
	</header>
	<div  id="scroll">
	<div class="mui-content">
		<!--用户号码套餐-->
	    <div class="user">
    		<a href="personalInfo.html" class="user-head">
    			<div class="head"><img src="images/user.png" /></div>
    			<div class="num-package">
    				<p>13800138001</p>
    				<p>4G上网套餐58元</p>
    			</div>
    		</a>
    		<a href="memberList.html" class="user-more">查看其他<i class="mui-icon mui-icon-arrowright"></i></a>
	    </div>
	    <!--话费信息-->
	    <div class="package-info">
	    	<a href="" class="mui-push-right">
	    		<span>180.18元</span>
	    		<span>话费余额</span>
	    	</a>
	    	<a href="" class="mui-push-right">
	    		<span>98.10元</span>
	    		<span>当月话费</span>
	    	</a>
	    	<a href="" class="mui-push-right">
	    		<span>1.93GB</span>
	    		<span>剩余流量</span>
	    	</a>
	    </div>
	    <!--流量图-->
	    <div class="chart">
	        <div class="anyield">
	            <a href="flowList.html"><p><span>1.9</span><span>GB</span></p>
	            	<p>剩余流量</p>
	            </a>
	        </div>
			<canvas class="circleRun" data-run="0" id="canvasThree" amout="1000" nowData="1000"></canvas>
	    </div>
	    <!--流量信息-->
	    <div class="package-info flow">
	    	<div class="flow-info">
	    		<span>本月套餐内剩余</span>
	    		<span>1.93GB</span>
	    	</div>
	    	<div class="flow-info">
	    		<span>本月套餐内已用</span>
	    		<span>1.46GB</span>
	    	</div>
	    	<div class="flow-info">
	    		<span>建议日均使用</span>
	    		<span>65.86MB</span>
	    	</div>
	    </div>
	    <div class="menu">
		    <ul class="mui-table-view mui-grid-view mui-grid-9">
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	            	<a href="billList.html">
	                    <i class="iconfont icon-huafei"></i>
	                    <div class="mui-media-body">话费详单</div>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	            	<a href="flowList.html">
	                    <i class="iconfont icon-liuliang"></i>
	                    <div class="mui-media-body">流量详单</div>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" id="chongzhi">
	            	<a href="recharge.html" >
	                    <i class="iconfont icon-chongzhi"></i>
	                    <div class="mui-media-body">充值缴费</div>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	            	<a href="packageRevise.html">
	                    <i class="iconfont icon-xiugai"></i>
	                    <div class="mui-media-body">套餐修改</div>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	            	<a href="packageAdd.html">
	                    <i class="iconfont icon-diejia"></i>
	                    <div class="mui-media-body">套餐叠加</div>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	            	<a href="numberStart-stop.html">
	                    <i class="iconfont icon-kaiting"></i>
	                    <div class="mui-media-body">号码开停</div>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	            	<a href="gprsStart-stop.html">
	                    <i class="iconfont icon-shuju"></i>
	                    <div class="mui-media-body">GPRS开停</div>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" id="all">
	            	<a href="#">
	                    <i class="iconfont icon-quanbu"></i>
	                    <div class="mui-media-body">全部</div>
	            	</a>
	            </li>
	       </ul>
        </div>
	</div>
	</div>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/iscroll.js"></script>
<script type="text/javascript" src="js/zcircleMove.js"></script>
<script type="text/javascript" charset="utf-8">
  	mui.init();
  	//添加弹性滚动
	function loaded() {
		var myScroll = new IScroll('#scroll', {
	        mouseWheel: true
	    });
	}
  	//设置图表值
  	$(function(){
		runCircle({
			percent:0.75,
		});
	})
  	//恢复mui中a标签不能跳转问题
	mui('body').on('tap','a',function(){document.location.href=this.href;}); 
	mui("#all").on('tap','a',function(){
		mui.toast('没有更多了...')
	})
</script>
</body>
</html>